import React, {useCallback, useMemo, useState, useReducer, useContext, useEffect} from 'react';
// import React,{useCallback, useMemo, useState, useReducer, useEffect} from './ireact/react';
import ReactDOM from 'react-dom';
// import ReactDOM from './ireact/react-dom';


function Counter() {
  const [number, setNumber] = useState(0);
  useEffect(()=>{
    console.log('开启一个定时器');
    const $$timer = setInterval(() => {
      setNumber(number => number + 1);
    }, 1000);

    return ()=>{
      console.log('销毁一个定时器');
      clearInterval($$timer)
    };
  },[]/*←默认第二个参数为undefined, 也就是说, 每次重新渲染都会执行 effect注册的函数（这里return的函数除初始化不会执行外,每次重新执行时会先于effect注册的回调执行; 另外组件销毁时, 会单独执行一次这个return的函数）*/)

  return (
    <div>
      Counter: {number}
    </div>
  )
}

function App(){
  const [visible, toggleVisible] = useState(true);
  return (
    <div>
      {visible ? <Counter/> : null}
      <button onClick={() => toggleVisible(x => !x)}>销毁 counter</button>
    </div>
  );
}

ReactDOM.render(<App/>, document.getElementById('root'));
